<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <title>boost search engine</title>
    <style>
        /* 去掉网页中的所有默认内外边距 */
        * {
            /* 设置外边距 */
            margin:0;
            /* 设置内边距 */
            padding:0;
        }
        /* 将body内的内容100%和html的呈现匹配 */
        html,
        body {
            height: 100%;
        }
        /* (以.开头类选择器)选中容器设置 */
        .container {
            /* 设置宽度 */
            width: 800px;
            /* 外边距位置,居中显示 0px上下边距 auto左右边距 */
            margin: 0px auto;
            /* 外边距的上边距 */
            margin-top: 15px;
        }
        /* 符合选择器,选container下的search容器 */
        .container .search {
            /* 宽度与父标签保持一致 */
            width: 100%;
            /* 高度设置为52像素点 */
            height: 52px;
        }
        /* 选中容器中的标签不同. */
        .container .search input {
            /* 左浮动left,使input和button合并在一起,将两个盒子之间的距离清零 */
            float: left;
            width: 640px;
            height: 40px;
            /* 设置边框 1px宽度    solid实线   rgb颜色 */
            border: 1px solid #4e6ef2;
            /* 右边框设置为空,不显示 */
            border-right: none;
            /* 设置内边距左侧 */
            padding-left: 10px;
            /* 字体大小 */
            font-size: 15px;
            /* 设置input内部的字体颜色 */
            color: #CCC;
            /* 设置字体格式 */
            font-family:'Times New Roman', Times, serif;
        }
        .container .search input:hover {
            border-color: #1f399f;
        }

        /* 选中容器中的标签不同. */
        .container .search button {
            /* 左浮动left,使input和button合并在一起 */
            float: left;
            width: 120px;
            height: 42px;
            /* 设置按钮背景颜色 */
            background-color: #4e6ef2;
            /* 设置字体颜色 */
            color: #fff;
            font-size: 17px;
            font-family:'Times New Roman', Times, serif;
            /* 设置为无边框 */
            border: none;
        }
        .container .search button:hover {
            background-color: #2440b3;
        }

        .container .result {
            width: 100%;
        }
        .container .result .item {
            margin-top: 20px;
        }
        .container .result .item a {
            /* 设置为块级元素,让其独占一行 */
            display: block;
            /* 去掉标题的下划线 */
            text-decoration: none;
            color: #2440b3;
            font-size: 20px;
        }
        /* 设置标题的光标时间,当光标放置标题上时出现下划线 */
        .container .result .item a:hover {
            color: #4e6ef2;
            text-decoration: underline;
        }
        .container .result .item p {
            margin-top: 5px;
            font-size: 16px;
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        .container .result .item i {
            display: block;
            /* 取消斜体风格 */
            font-style: normal;
            color: green;
        }
        .container .result .item i:hover {
            color: rgb(142, 17, 17);
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- 网页整体页面 -->
    <div class="container">
        <!-- 搜索框 -->
        <div class="search">
            <!-- 搜索框 type显示类型 value显示内容-->
            <input type="text" value="输入搜索关键字...">
            <!-- 搜索按钮 onclick点击事件-->
            <button onclick="Search()">搜索一下</button>
        </div>
        <!-- 搜索结果 -->
        <div class="result">

        </div>
    </div>
    <script>
        function Search() {
            // 浏览器的一个弹出框
            // alert("hello js");
            
            // 提取数据
            let query = $(".container .search input").val();
            if (query == '' || query == null) {
                alert("搜索的内容不能为空");
                return;
            }
            // console是浏览器的对话框,用于查看js数据
            // console.log("query = " + query);

            // 发起http请求,ajax一个和后端进行数据交互的JQuery函数
            $.ajax({
                type: "GET",
                url: "/s?word=" + query,
                // 成功之后获得的数据就放在data当中
                success: function(data) {
                    console.log(data);
                    BuildHtml(data);
                }
            });
        }
        function BuildHtml(data) {
            // <!-- 单个结果 -->
            // <div class="item">
            //    <!-- 可点击跳转  -->
            //    <a href="#">这是标题</a>
            //    <!-- 内容正文 -->
            //    <p>这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘</p>
            //    <!-- 斜体显示 -->
            //    <i>https://www.boost.org/doc/libs/1_84_0/libs/algorithm/doc/html/algorithm/CXX11_inner_algorithms.all_of</i>
            // </div>
            if (data == '' || data == null) {
                document.write("没有搜索到有关内容");
                return;
            }
            // 获取html中的result标签
            let result_lable = $(".container .result");
            // 清空历史搜索结果
            result_lable.empty();
            // 遍历result中的所有元素
            for (let elem of data) {
                // console.log(elem.title);
                // console.log(elem.url);

                // 构造a标签
                let a_lable = $("<a>", {
                    // 文本获取元素标题
                    text: elem.title,
                    // 标题跳转链接绑定url
                    href: elem.url,
                    // 跳转到新页面
                    target: "_blank"
                });
                // 构造p标签
                let p_lable = $("<p>", {
                    text: elem.desc
                });
                // 构造i标签
                let i_lable = $("<i>", {
                    text: elem.url
                });
                // 构建item类别的div标签
                let div_lable = $("<div>", {
                    class: "item"
                });
                // 将提出的a,p,i标签添加至div标签中
                a_lable.appendTo(div_lable);
                p_lable.appendTo(div_lable);
                i_lable.appendTo(div_lable);
                // 将item类的div标签添加进result类别的标签中,构成结果
                div_lable.appendTo(result_lable);
            }
        }
    </script>
</body>
</html>